<template>
  <div>
    <div id="breadcrumb">
      <a-breadcrumb>
        <a-breadcrumb-item>玩家列表</a-breadcrumb-item>
      </a-breadcrumb>
    </div>
    <a-card :bordered="false">
      <div>
        <a-table
            size="middle"
            rowKey="id"
            :columns="columns"
            :data-source="userList"
            :loading="loading"
            :pagination="false"
            @change="handleTableChange"
        >
          <template slot="avatar" slot-scope="text, record">
            <div>
              <a-avatar icon="user" :src="record.avatar"/>
            </div>
          </template>
          <template slot="is_playing" slot-scope="text, record">
            <div>
              <a-switch :checked="record.is_playing === 1 ? true:false"
                        @change="onChange(record.id,record.is_playing)"/>
            </div>
          </template>
          <template slot="action" slot-scope="text, record">
            <div>
              <a href="javascript:;" @click="handleDeleteClick(record)">
                删除
              </a>
            </div>
          </template>
        </a-table>
      </div>
      <pagination
          :current="query.page"
          :total="query.total"
          :pageSize="query.limit"
          @change="handlePageClick"
      />
    </a-card>
  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
import qs from 'qs'

export default {
  name: 'Users',

  components: {
    Pagination
  },

  data () {
    return {
      columns: [
        {
          title: 'ID',
          dataIndex: 'id'
        },
        {
          title: '头像',
          dataIndex: 'avatar',
          scopedSlots: { customRender: 'avatar' }
        },
        {
          title: '姓名',
          dataIndex: 'player'
        },
        {
          title: '游戏中',
          dataIndex: 'is_playing',
          scopedSlots: { customRender: 'is_playing' }
        },
        {
          title: '创建时间',
          dataIndex: 'created_at'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      visible: false,
      loading: false,
      userList: [],
      id: null,
      player: '',
      query: {
        page: 1,
        total: 0,
        limit: 10
      }
    }
  },
  watch: {
    $route (to) {
      this.handleSearchClick(to.query)
      this.fetchList()
    }
  },
  mounted () {
    this.fetchList()
  },
  methods: {
    handleTableChange (...args) {
      this.handleSearchClick({
        page: 1
      })
    },
    handlePageClick (page) {
      this.handleSearchClick({
        page
      })
    },
    handleSearchClick (query = {}) {
      const tempQuery =
          Object.keys(query).length === 0
              ? {
                page: 1,
                total: 0,
                limit: 10
              }
              : this.query

      this.query = { ...tempQuery, ...query }

      if (Object.keys(query).length > 0) {
        this.$router.push({
          path: '/users',
          query: this.query
        })
      }
    },
    fetchList () {
      this.loading = true

      const queryData = { ...this.query }

      this.$http.get(`api/admin/players?${qs.stringify(queryData)}`).then((result) => {
        this.loading = false
        this.query = { ...this.query, ...result.pagination }

        this.userList = result.data
      }, (error) => {
        this.loading = false
        this.query.page = 1
        this.query.total = 0
        this.userList = []
        this.$message.error(error.message)
      })
    },
    handleDeleteClick (record) {
      this.$confirm({
        title: '确认操作',
        content: '确认后将无法撤回',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          this.$http.delete(`api/admin/players/${record.id}`).then((result) => {
            this.$message.success('删除成功')
            this.fetchList()
          }, (error) => {
            this.$message.error(error.message)
          })
        }
      })
    },
    onChange (id, is_playing) {
      this.$http.put(`api/admin/players/${id}?is_playing=${is_playing}`).then((result) => {
        this.$message.success('操作成功')
        this.fetchList()
      }, (error) => {
        this.$message.error(error.message)
      })
    }
  }
}
</script>

<style scoped>
#breadcrumb {
  margin-top: 0;
  margin-bottom: 10px;
}
</style>